<!-- 诉求查看页面(管理端) -->
<!-- 只查看待处理的诉求 -->
<!-- 只能查看自己管理的行业的诉求 -->
<template>
    <div id="div">
      <!-- <el-page-header @back="goBack"></el-page-header> -->
        <el-button id="history" @click="allealAdminhistory">历史诉求</el-button>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column  prop="appealthemeName" label="诉求主题"  width="280">
                <template slot-scope="scope">
                  <el-link @click="toViewbyId(scope.row)" target="_blank" class="buttonText"  type="primary" :underline="false" >{{scope.row.appealthemeName }}</el-link>
                </template>
            </el-table-column>
            <!-- <el-table-column
                prop="appealreportingId"
                label="诉求id"
                width="100">
            </el-table-column> -->
            <el-table-column
                prop="appealcontent"
                label="诉求内容"
                width="380">
            </el-table-column>
            <el-table-column
                prop="appealtypeName"
                label="诉求类型"
                width="180">
            </el-table-column>
            <el-table-column
                prop="appealDate"
                label="诉求时间"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作"  width="100">
                <template slot-scope="scope">
                <el-button @click="adopt(scope.row)" type="text" size="small">通过</el-button>
                <el-button @click="reject(scope.row)" type="text" size="small">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination ref="pagination"
          background
          layout="prev, pager, next"
          page-size="5"
          :total= "totalcount"
          @current-change='page'>
        </el-pagination>

    </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [],
      selectappealAllbyStatusurl: 'http://localhost:8081/appeal/selectappealAllbyStatus',
      toatalcounturl: 'http://localhost:8081/appeal/pagecount',
      appealUpdatebyidUrl: 'http://localhost:8081/appeal/appealUpdatebyid',
      appealrejectidUrl: 'http://localhost:8081/appeal/appealrejectid',
      currpage: '',
      tradeId: localStorage.getItem('tradeId'),
      totalcount: '',
    }
  },
  methods: {
     // 点击内容跳转至详情
     toViewbyId (row) {
      this.$router.push({
        path: '/completeAdmin',
        query: {
          appealid: row.appealreportingId
        }
      })
    },
    // 返回上一层
    goBack () {
      console.log('go back')
      this.$router.go(-1)
    },

    // 跳转诉求添加页面
    allealuserAdd () {
          this.$router.push('/appealreportingUserAdd')
    },

     // 跳转历史记录界面
     allealAdminhistory () {
      this.$router.push('/appealreportingAdminhistory')
    },
    
    page(currpage){
        this.selectAllappeal(currpage)
    },

    // 每页查询5条数据，按时间排序
    selectAllappeal (currpage) {
    axios.get(this.selectappealAllbyStatusurl + '/1/1/0/' + this.tradeId + '/' + currpage).then(
      res => {
        console.log(res.data)
        this.tableData = res.data
      }
    ).catch(
      err => {
        console.log(err)
      }
    )
    },

    //获取总页数
    gettotalcount(){
    axios.get(this.toatalcounturl+ '/1/0/' + this.tradeId).then(
      res=>{
           console.log(res.data)
           this.totalcount = res.data;
        }
        ).catch(
            err=>{
                console.log(err);
            }
        )
    },

    //通过
    adopt(row){
      const _this=this
      // alert(row.appealreportingId)
      axios.get(this.appealUpdatebyidUrl+ '/2/' + row.appealreportingId).then(
      res=>{
           console.log(res.data)
           if(res.data === 'success'){
            _this.$message('审批通过')
             window.location.reload()
           }else{
            _this.$message('审批异常')
           }
        }
        ).catch(
            err=>{
                console.log(err);
            }
        )
    },

     //驳回
     reject(row){
      const _this=this
      this.$prompt(
          '请填写驳回原因', 
          '提示',
          {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type:"warning",            // 图标样式 "warning"|"error"...
              inputValue: '',
              inputErrorMessage: '输入不能为空',
              inputValidator: (value) => {       // 点击按钮时，对文本框里面的值进行验证
                  if(!value) {
                      return '输入不能为空';
                  }
              },
          }).then(({value}) => {
              console.log(value);
              axios.get(this.appealrejectidUrl+ '/2/'+ value +'/'+ row.appealreportingId).then(
                res=>{
                    console.log(res.data)
                    if(res.data === 'success'){
                      _this.$message('审批被驳回')
                      window.location.reload()
                  
                    }else{
                      _this.$message('驳回异常')
                    }
                  }
                  ).catch(
                      err=>{
                          console.log(err);
                      }
                  )
              // TO DO DO ...
          }).catch((err) => {
              console.log(err);
          });          
    },


  },

  mounted(){
    this.selectAllappeal(1)
    this.gettotalcount()
  }
}
</script>

<style scoped>

#history{
  margin-top: 20px;
  position: relative;
  left: 1020px;
  background-color: blue;
  color: white;
  font-size: 16px;
  font-weight: bolder;
}
.el-table .cell{
  padding-left: 0px;
}

#div{
  margin-top: 20px;
  margin-left: 50px;
}
.el-pagination{
  text-align: center;
}
</style>
